<template>
  <div class="app-container table-app-container">
    <div class="fixed-table">
      <div class="fixed-table-actionbar">
        <TableFilter :status="status" />
        <ActionBar v-if="!forSelection" />
      </div>

      <PageableTable
        :loading="loading"
        :data="insideTableData"
        :total="totalElements"
        :page="currentPage"
        :page-size="pageSize"
        :table-height="tableHeight"
        class="fixed-table-table"
        :multiple-selected="multipleSelected"
        @page-change="onPageChange"
        @sort-change="onSortChange"
        @selection-change="onSelectionChange"
      >
        <el-table-column v-for="column in insideColumns" :key="column.key" :label="column.title" :prop="column.key" :sortable="column.sortable">
          <template slot-scope="scope">
            <column-render :render="column.render" :row="scope.row" :column="column" />
          </template>
        </el-table-column>
        <el-table-column v-if="!forSelection" label="操作" align="center" width="120" class-name="small-padding fixed-width">
          <template slot-scope="{row}">
            <el-button type="text" title="查看" size="mini" icon="el-icon-view" @click="view(row.id)" />
            <el-button type="text" title="编辑" size="mini" icon="el-icon-edit" @click="edit(row.id)" />
            <el-button type="text" title="删除" size="mini" icon="el-icon-delete" @click="remove(row.id)" />
            <!-- <el-button type="text" :title="row.status === true ? '启用':'停用'" size="mini" :icon="row.status === true ? 'el-icon-switch-button':'el-icon-video-play'" @click="updateStatus(row.id, row.status)" /> -->
          </template>
        </el-table-column>
      </PageableTable>
    </div>
    <FormDialog title="编辑供应商" :show.sync="dialogFormVisible" width="40%" @on-ok="ok" @on-cancel="cancel">
      <EditForm :id="editId" ref="editForm" />
    </FormDialog>
    <ViewDialog
      class="fixed-dialog-height"
      title="供应商信息"
      :show.sync="dialogViewVisible"
      :drawer="true"
      width="40%"
      @on-cancel="viewCancel"
    >
      <ViewForm :id="editId" />
    </ViewDialog>
  </div>
</template>

<script>
import ViewDialog from '@neu/biz-core/components/ViewDialog'
import FormDialog from '@neu/biz-core/components/FormDialog'
// 表格查询组件独立编写，需要传递pageable-table实例的mixin方法filter
import TableFilter from './components/tableFilter'
// 编辑实例组件独立编写，需要传递id属性，判断新建还是更新操作
import EditForm from './components/editForm'
import ViewForm from './components/viewForm'
import ActionBar from './components/actionBar'
import PageableTable from '@neu/biz-core/components/PageableTable'
import databind from '@neu/biz-core/mixins/databind'
import {
  page,
  remove,
  enable,
  disable
} from '@neu/dcam-ui/api/manufacturer'

export default {
  name: 'ManufacturerPage',
  components: {
    TableFilter,
    FormDialog,
    ViewDialog,
    EditForm,
    ViewForm,
    ActionBar,
    PageableTable
  },
  // 加入混入，使表格混入更多的api操作
  mixins: [databind],
  props: {
    // 控制checkBox
    multipleSelected: {
      type: Boolean,
      default: false
    },
    status: {
      type: Boolean,
      default: null
    }
  },
  data() {
    return {
      r: page,
      d: remove,
      insideColumns: [
        { title: '名称', key: 'name', sortable: 'custom' },
        { title: '地址', key: 'address', sortable: 'custom' },
        { title: '联系人', key: 'person', sortable: 'custom' },
        { title: '联系电话', key: 'phone' }
        // { title: '开户行', key: 'bank' },
        // { title: '账号', key: 'accountNumber' },
        // { title: '税号', key: 'taxId' },
        // { title: '邮编', key: 'postCode' },
        // { title: '状态', key: 'status',
        //   render: (h, params) => {
        //     const text = params.row.status === true ? '启用' : '禁用'
        //     return h('span', [
        //       h('el-tag', text)
        //     ])
        //   }
        // }
      ],
      searchObj: {
        s_status: null
      },
      dialogFormVisible: false,
      dialogViewVisible: false,
      editId: -1
    }
  },
  created() {
    this.editId = -1
    this.searchObj['s_status'] = this.status
    this.filter(this.searchObj)
  },
  methods: {
    view(id) {
      this.editId = id
      this.dialogViewVisible = true
    },
    viewCancel() {
      this.editId = -1
      this.dialogViewVisible = false
    },
    // 表格编辑按钮点击事件处理
    edit(id) {
      // 打开对话框
      this.editId = id
      this.dialogFormVisible = true
      // 更新当前被编辑实体的ID，自动传递至编辑表单
    },
    // 编辑资产对话框确认事件处理
    ok() {
      // 直接调用表单实例的保存方法
      this.$refs.editForm.save().then(response => {
        if (response === false) return
        this.$message({
          showClose: true,
          message: '操作成功！',
          type: 'success'
        })
        // 调用pageable-table实例的mixin方法refresh()，更新表格
        this.refresh()
        // 关闭对话框
        this.dialogFormVisible = false
        this.$refs.editForm.reset()
      })
    },
    cancel() {
      this.editId = -1
      this.$refs.editForm.reset()
      // 关闭对话框
      this.dialogFormVisible = false
    },
    /** 更新供应商状态 */
    updateStatus(id, status) {
      this.$confirm('确定要修改此供应商状态', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if (status === true) {
          disable(id).then(res => {
            this.$message({
              type: 'success',
              message: '禁用成功!'
            })
            this.fetch()
          })
        } else {
          enable(id).then(res => {
            this.$message({
              type: 'success',
              message: '启用成功!'
            })
            this.fetch()
          })
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消修改'
        })
      })
    }

  }
}
</script>
